<template>
    <div class="chat-window">
        <div class="message-content">
            <div class="message-group">
                <div class="message-item" :class="[item.role]" v-for="(item, index) in lists" :key="index">
                    <span class="name">{{ item.role == "user" ? "你" : pageTitle }}</span>
                    <v-md-preview class="content" :text="item.content" :class="{ error: item.error }"></v-md-preview>
                </div>
            </div>
        </div>
        <div class="user-input" :class="{ disable: !canUse }">
            <input
                class="inp"
                type="text"
                v-model="words"
                ref="wordsInput"
                :disabled="!canUse"
                @keyup.enter="send"
                @input="scrollToBottom"
                @focus="scrollToBottom"
                placeholder="输入你的问题"
            />
            <button class="btn" @click="send">{{ canUse ? "发送" : "正在回答" }}</button>
        </div>
    </div>
</template>

<script>
import { Base64 } from "js-base64";
import Sign from "../utils/sign";
export default {
    name: "Home",
    data() {
        return {
            pageTitle: "GPT-3.5语言模型",
            canUse: true,
            words: "",
            lists: [
                {
                    role: "system",
                    error: false,
                    content: "请问有什么可以帮你的吗？",
                },
            ],
        };
    },
    components: {},
    created() {
        document.title = this.pageTitle;
    },
    mounted() {},
    unmounted() {},
    methods: {
        /**
         * 发送消息
         */
        send() {
            if (!this.canUse || this.words == "") return;
            this.lists.push({
                role: "user",
                error: false,
                content: this.words,
            });
            let requestData = {
                words: Base64.encode(this.words),
                time: parseInt(Date.parse(new Date()) / 1000),
            };
            requestData.sign = Sign.makeSign(requestData, this.$config.privateKey);

            this.lists.push({
                role: "system",
                error: false,
                content: "...",
            });
            let lastMessage = this.lists[this.lists.length - 1];

            this.scrollToBottom();

            this.canUse = false;
            this.axios({
                method: "POST",
                url: this.$config.api,
                data: JSON.stringify(requestData),
            }).then((r) => {
                this.canUse = true;
                if (r.data.code == 1) {
                    this.words = "";
                    let answer = JSON.parse(Base64.decode(r.data.data));
                    lastMessage.content = answer.answer[0].message.content;
                } else {
                    lastMessage.error = true;
                    lastMessage.content = "[" + r.data.msg + "]";
                }
                this.$nextTick(() => {
                    this.$refs.wordsInput.focus();
                });
                this.scrollToBottom();
            });
        },
        /**
         * 控制滚动条
         */
        scrollToBottom() {
            setTimeout(() => {
                var ele = document.getElementsByClassName("message-content")[0];
                if (ele.scrollHeight > ele.clientHeight) {
                    ele.scrollTop = ele.scrollHeight;
                }
            }, 200);
        },
    },
};
</script>

<style lang="less" scoped>
.chat-window {
    width: 1200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px #eaeaf9;
    background-color: #ededed;
    .message-content {
        z-index: 5;
        width: 100%;
        height: 700px;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: scroll;
    }
    .message-group {
        display: flex;
        flex-direction: column;
    }
    .message-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        font-size: 14px;
        margin-bottom: 10px;
        .name {
            color: #666666;
        }
        .content {
            max-width: 650px;
            padding: 10px 20px;
            margin-top: 10px;
            box-sizing: border-box;
        }
    }
    .message-item.system {
        align-items: flex-start;
        .content {
            color: #000000;
            background-color: #ffffff;
            border-radius: 0 10px 10px 10px;
        }
        .content.error {
            color: #ffffff;
            background-color: #ff0000;
        }
    }
    .message-item.user {
        align-items: flex-end;
        .content {
            color: #ffffff;
            background-color: #484aa1;
            border-radius: 10px 0 10px 10px;
        }
    }
    .user-input {
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100px;
        border-top: 2px solid #f5f5f5;
        .inp,
        .btn {
            height: 50px;
            border: 0;
            outline: 0;
            box-sizing: border-box;
            font-size: 14px;
        }
        .inp {
            width: 600px;
            padding: 0 10px;
            border-radius: 10px 0 0 10px;
            background-color: #ffffff;
        }
        .btn {
            width: 100px;
            color: #ffffff;
            background-color: #484aa1;
            border-radius: 0 10px 10px 0;
        }
    }
    .user-input.disable {
        .btn {
            cursor: not-allowed;
            background-color: #b1b1b1;
        }
    }
}
.content:deep(.github-markdown-body) {
    padding: 0;
    font-size: unset;
    > p:last-child {
        margin-bottom: 0;
    }
}
@media screen and (max-width: 768px) {
    .chat-window {
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        width: 100%;
        height: 100vh;
        border-radius: 0;
        .message-content {
            height: 100%;
            padding: 10px;
        }
        .message-group {
            padding-bottom: 65px;
        }
        .message-item {
            .name {
                display: none;
            }
            .content {
                max-width: 100%;
                padding: 10px;
            }
        }
        .user-input {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            height: auto;
            border-top: 0;
            .inp,
            .btn {
                height: 45px;
                border: 2px solid #484aa1;
            }
            .inp {
                width: 70%;
            }
            .btn {
                width: 20%;
            }
        }
        .user-input.disable {
            .inp,
            .btn {
                border: 2px solid #b1b1b1;
            }
        }
    }
}
</style>